<template>
  <div class="security-config">
    <a-radio-group
      v-model="activeRuleType"
      type="button"
      class="ml-6"
      @change="handleChange">
      <a-radio
        v-for="item in ruleTypeOptions"
        :key="item.value"
        :value="item.value">
        {{ item.label }}
      </a-radio>
    </a-radio-group>
    <component :is="CovertList" :key="randomKey" :type="activeRuleType" />
  </div>
</template>
<script lang="ts" setup>
import { useSiteStore } from '@/stores/site'
import { useConfigStore } from '@/stores/config'
import CovertList from './components/CovertList.vue'
const store = useSiteStore()
const randomKey = ref(0)
const activeRuleType = ref(store.activeRuleType)
const handleChange = (value: string | number) => {
  randomKey.value = Math.random()
  store.updateRuleType(value)
  activeRuleType.value = value
}
useConfigStore().getCondition()
</script>
<style lang="less" scoped>
.security-config {
  @apply bg-white pt-6  rounded-lg flex-1 overflow-hidden;
}
</style>
